<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML>
<html>
<head>
    <title>Title</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#bgimg").animate({"margin-left": "-380px"}, 2000, function () {
                //定时，2秒之后执行
                setTimeout("moveRight()", 2000);
            })
            setInterval("walk()",500)
        })
        function moveRight(){
            $("#bgimg").animate({"margin-left":"0px"},2000,function(){
               $("#grass").animate({"width":"760px"},3000)
               $("#bar").animate({"width":"10px","height":"100px","margin-left":"760px"},3000,function(){
                   $("#bar").remove()
               })
               $("#cap").animate({"width":"10px","margin-left":"760px","top":"150px"},3000,function(){
                   $("#cap").remove()
               })
            });
        }
        function walk(){
            var left=parseInt($("#z").css("left"));
            $("#z").css("left",left-30);
        }
    </script>
</head>
<body>
<div style="width: 1020px;overflow: hidden">
    <img id="bgimg" src="images/interface/background1unsodded.jpg"/>
</div>
<div id="grass" style="position: absolute;top:350px;left: 260px;width: 0;overflow: hidden">
    <img  src="images/interface/sod1row.png">
    <img id="bar" src="images/interface/SodRoll.png" style="position: absolute;width:70px;height:100px;left:-70px;top:-5px">
    <img id="cap" src="images/interface/SodRollCap.png"  style="position: absolute;top:50px;left:-70px;">
</div>
<img id="z" src="images/Zombies/FootballZombie/FootballZombie.gif" style="position: absolute;top:450px;left: 800px"/>
</body>
</html>
